<template>
    <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="() => { $router.push('/') }" fixed />
    <div style="height: 45px;"></div>
    <!-- 购物车空状态 -->
    <!-- <van-empty v-if="!cartData.length" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
        image-size="80" description="购物车空空" />
    渲染区域 -->
    <div v-for="item in cartData">
        <!-- 删除区域 -->
        <van-swipe-cell>
            <van-card :price="item.goods.goods_price" :title="item.goods.goods_name">
                <!-- 插槽1 -->
                <template #thumb>
                    <div style="display: flex;">
                        <!-- 复选框 -->
                        <van-checkbox v-model="item.checked"></van-checkbox>
                        <!-- 图片 -->
                        <img :src="item.goods.goods_small_logo ? item.goods.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'"
                            style="width: 70px;height: 70px;" alt="">
                    </div>
                </template>
                <!-- 插槽2 -->fdzdfssffsaf
                <template #num>
                    <!-- 步进器 -->
                    <van-stepper v-model="item.number" theme="round" button-size="22" disable-input />
                </template>
            </van-card>
            <template #right>
                <van-button square text="删除" type="danger" class="delete-button" @click="delcart(item.id)"  style="height: 100%;"/>
            </template>
        </van-swipe-cell>
    </div>
    <!-- 提交订单栏 -->
    <van-submit-bar :price="allprice" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="checkedall">全选</van-checkbox>
        <template #tip>
            你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
        </template>
    </van-submit-bar>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useCounterStore } from '@/stores/piniaCart'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
// 自定义 购物车数据
let cartData = ref([]);
// 自定义渲染函数 将pinia 中的购物车数据 赋值给 cartData
const cart = () => {
    cartData.value = store.carts
}
cart();
// 购物车删除 
const delcart = (id) => {
    store.carts = store.carts.filter(item => item.id != id)
    cart()
}
// 购物车全选 计算
const checkedall = computed({
    // get 复选框
    get(){
        if(cartData.value.length == 0){
            return false
        }else{
            return cartData.value.every(item => item.checked)
        }
    },
    // set 全选
    set(val){
        cartData.value.forEach(item => item.checked = val)
    }
})
// 只计算 选中的
const allprice = computed(()=>{
    let allprice = ref(0)
    // 只计算 选中的
    let cartOk = cartData.value.filter(item=>item.checked);
    console.log(cartOk)
    cartOk.forEach(item=>{
        allprice.value += item.number * item.goods.goods_price
    })
    return allprice.value * 100
})
import { showSuccessToast, showFailToast } from 'vant';
// 引入订单接口函数
import { orderApi } from '@/api/api'
// 引入跳转
import { useRouter } from 'vue-router'
const router = useRouter()
// 提交订单
const onSubmit = ()=>{
    // 获取一下选中的商品数据
    let cartOk = cartData.value.filter(item=>item.checked);
    if(cartOk.length == 0){
        // 没有选中任何商品
        showFailToast('请选择商品');
    }else{
        
        // 加入到订单中去 生成订单 -- 接口函数
        orderApi({
            goodsIds:cartOk.map(item => item.goods.goods_id).join(','),
            username:localStorage.getItem('username'),
            product_code:cartOk[0].goods.goods_name + '等件商品',
            totalPrice:allprice.value,
            nums:cartOk.map(item=>item.number).join('')
        }).then(res=>{
            console.log('生成订单',res)
            // 带着订单号 通过传参的方式 跳转到 订单详情
            router.push('/orderdetail/' + res.data.data.orderId)
        })
    }
}
</script>

<style lang="scss" scoped></style>